<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title>Sass: #teamSass</title>
    <meta content="Syntatically Awesome Style Sheets" name="description">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="./css/main.css" rel="stylesheet">
</head>
<body class="community">
<div class="page">
    <div class="alert stickers">
        <div class="container">
            <p>
                <strong>Your laptop needs more Sass.</strong>
                <a href="http://devswag.com/products/sass-stickers-4">Grab a set of Sass stickers now</a>. </p>
        </div>
    </div>
    <div class="pop-stripe"></div>
    <header class="banner" role="banner">
        <div class="container">
            <h1 class="site-brand">
                <a href="/">
                    <img height="48" alt="Sass" src="./images/logo.svg">
                </a>
            </h1>
            <nav class="navigation collapse" role="navigation">
                <ul>
                    <li><a href="./install.html">Install</a></li>
                    <li><a href="./guide.html">Learn Sass</a></li>
                    <li><a href="http://blog.sass-lang.com/">Blog</a></li>
                    <li><a href="../documentation/file.SASS_REFERENCE.html">Documentation</a></li>
                    <li><a href="./community.html">Get Involved</a></li>
                    <li><a href="./libsass.html">libSass</a></li>
                </ul>
            </nav>
            <div class="banner-toggle">
                <button data-target=".navigation" data-toggle="collapse" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>
    </header>
    <div class="page-header">
        <div class="container">
            <h1> #teamSass </h1>
        </div>
    </div>
    <div class="body">
        <div class="container">
            <div class="content"><p class="introduction"> Sass has an awesome community of designers and developers who
                love to spread the word and help people out. Here we’ve collected some resources.
                Happy&nbsp;Styling! </p>
                <main class="main" role="main">
                    <ul class="list-columns anchors">
                        <li><p><strong>Everyone is welcome in the Sass community, except those who are
                            unwelcoming</strong>. Please read and follow our <a href="/community-guidelines">community&nbsp;guidelines</a>.
                        </p>
                            <p>Still <strong>getting started</strong>? There are some great <a href="#Tutorials">tutorials</a>
                                out there to get you on your feet. Want to <strong>learn more</strong>? There's some
                                great <a href="#Blogs">Sass blogs</a> (including <a href="#Articles">a few particular
                                    articles</a> we recommend reading), and even a few <a href="#Books">books about
                                    Sass</a> to help you learn some new tips and tricks.</p></li>
                        <li><p>The Sass community is amazing. There are a number of <a href="#Frameworks">frameworks</a>
                            that make using Sass simple. Want try Sass in Node, Python, or another framework? Check out
                            the <a href="/libsass">libSass&nbsp;resources</a>.</p>
                            <p>Thinking of <strong>contributing</strong> to Sass itself? We rely on everyone to keep
                                Sass as stable as it is. Feel free to <a href="#Contribute">submit a patch via pull
                                    request</a> to the Sass project.</p>
                            <p>Want to create your own Sass implementation? Check out our <a href="/implementation">implementation
                                guidelines</a>.</p></li>
                    </ul>
                    <hr>
                    <div class="content-primary"><h2 id="Articles">Sass Articles on the Web</h2>
                        <ul class="articles">
                            <li><h3><a href="http://css-tricks.com/sass-vs-less/">Sass vs. LESS</a></h3>
                                <p>by Chris Coyier, from CSS Tricks, May 2012</p></li>
                            <li><h3><a href="http://css-tricks.com/redesigning-with-sass/">Redesigning with Sass</a>
                            </h3>
                                <p>by David Walsh, from CSS Tricks, October 2012</p></li>
                            <li><h3><a href="http://anthonyshort.me/using-bower-with-sass-and-compass/">Using Bower with
                                Sass &amp; Compass</a></h3>
                                <p>by Anthony Short, October 2012</p></li>
                            <li><h3><a href="http://cognition.happycog.com/article/preprocess-this">Preprocess THIS!</a>
                            </h3>
                                <p>by Allison Wagner, from Cognition, September 2012</p></li>
                            <li><h3><a
                                    href="http://unmatchedstyle.com/news/a-newbs-guide-to-syntactically-awesome-stylesheets-sass-part-1.php">A
                                Newb’s Guide to Syntactically Awesome Stylesheets (Sass) – part 1</a></h3>
                                <p>by Dale Sande, from Unmatched Style, September 2012</p></li>
                            <li><h3><a href="http://www.mobify.com/dev/sass-sleuth-debugging-sass-in-webkit-browsers/">Sass
                                Sleuth: Debugging Sass in Webkit Browsers</a></h3>
                                <p>by Roman, from the Mobify blog, August 2012</p></li>
                            <li><h3><a
                                    href="http://www.zurb.com/article/1031/stop-the-pain-of-vanilla-css-and-get-reli">Stop
                                the Pain of Vanilla CSS and Get Relief by Adding Toppings with Sass</a></h3>
                                <p>by Chris, from the Zurb blog, July 2012</p></li>
                            <li><h3><a
                                    href="http://viget.com/inspire/building-a-nested-responsive-grid-with-sass-compass">Building
                                a Nested Responsive Grid with Sass &amp; Compass</a></h3>
                                <p>by Trevor Davis, from Viget, May 2012</p></li>
                            <li><h3><a href="http://thesassway.com/beginner/the-inception-rule">Nested Selectors: The
                                Inception Rule</a></h3>
                                <p>by Mario 'Kuroir' Ricalde, from The Sass Way, November 2011</p></li>
                            <li><h3><a
                                    href="http://www.creativebloq.com/netmag/improve-your-responsive-design-workflow-sass-10116699">Improve
                                your Responsive Design Workflow with Sass</a></h3>
                                <p>by Ryan Taylor, from .net, October 2011</p></li>
                            <li><h3><a href="http://thesassway.com/beginner/getting-started-with-sass-and-compass">Getting
                                Started with Sass and Compass</a></h3>
                                <p>by Adam Stacoviak, from The Sass Way, June 2011</p></li>
                            <li><h3><a href="http://www.sencha.com/blog/getting-sassy-with-css/">Getting Sassy with
                                CSS</a></h3>
                                <p>by David Kaneda, from the Sencha blog, June 2010</p></li>
                            <li><h3><a
                                    href="http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/">Using
                                Compass and Sass for your Next CSS Project</a></h3>
                                <p>by Alex Coomans, from Net Tuts, August 2009</p></li>
                            <li><h3><a href="http://alwaystwisted.com/post.php?s=2013-04-01-my-media-query-mixin">My
                                Media Query Mixin</a></h3>
                                <p>by Stuart Robson, April 2013</p></li>
                            <li><h3><a
                                    href="http://alwaystwisted.com/post.php?s=2013-01-07-structuring-my-sass-101-part-1">Structuring
                                My Sass 101</a></h3>
                                <p>by Stuart Robson, January 2013</p></li>
                            <li><h3><a
                                    href="http://www.thesassway.com/articles/sass-doesnt-create-bad-code-bad-coders-do">Sass
                                doesn't create bad code. Bad coders do.</a></h3>
                                <p>by Roy Tomeij, from The Sass Way, February 2012</p></li>
                        </ul>
                        <h2 id="Contribute">Contribute</h2>
                        <p>Sass is an <a href="https://github.com/sass/sass">open source project</a> and we encourage
                            you to contribute. You can contribute with <a href="https://github.com/sass/sass/issues">bug
                                reports and feature requests</a>, and if you contribute code, we'll love you forever. If
                            you just want to help out but you're not sure what to do, the <a
                                    href="https://github.com/sass/sass/labels/Help%20Wanted">Help Wanted label</a> on
                            the issue tracker is a good place to start. It has a mix of feature requests, bugs, and
                            tasks that aren't coding-intensive that the developers think are a good place for someone
                            new to the codebase to jump in.</p>
                        <p>When writing code, there are two primary branches we use. The <a
                                href="https://github.com/sass/sass">stable branch</a> is the default; is where we do
                            development on the released version of Sass. Bug fixes for released functionality,
                            documentation improvements, and and general infrastructure stuff should all go on stable.
                            The <a href="https://github.com/sass/sass/tree/master">master branch</a> is where we work on
                            the next version of Sass. Once you've followed the steps below, new features should be
                            submitted to master.</p>
                        <p>The Sass codebase is pretty big, and it can be intimidating to navigate it and understand the
                            best way to make a change. If you need help, make a post on <a
                                    href="https://groups.google.com/forum/#!forum/sass-lang">the Sass mailing list</a>;
                            the Sass developers are happy to assist, even if you don't have much experience with Ruby or
                            programming as a whole. They can answer questions about how the system works, suggest
                            avenues for solving problems, and review your code once it's written.</p>
                        <p>Whether you're adding a feature or fixing a bug, if it changes publicly visible behavior,
                            it's important to write automated tests for it. All the tests live in the
                            <code>test/sass</code> directory; find the test file that's most closely related to your
                            change, and add a test or tests there. For a feature, make sure your tests fully cover all
                            the ways that feature could be used, including ways it could be invalid.</p>
                        <p>Once you've written a patch with tests, send it to us as a <a
                                href="https://help.github.com/articles/creating-a-pull-request/">pull request</a>. A
                            developer will look it over, and will probably make some suggestions and requests. Once you
                            address those, it'll get merged in!</p>
                        <h2 id="AddingSyntax">Adding Syntax</h2>
                        <p>The biggest and most impressive features of Sass usually involve adding new syntax of some
                            sort. This can be pretty fun—something that used to be an error starts working because you
                            made it—but syntax changes are also a lot of work. For statement-level syntax like a new
                            <code>@</code>-rule, you have to:</p>
                        <ul>
                            <li><p>Add a node for the syntax to the abstract syntax tree in <a
                                    href="https://github.com/sass/sass/tree/stable/lib/sass/tree"><code>lib/sass/tree</code></a>.
                            </p></li>
                            <li><p>Parse the syntax in SCSS to the node. The SCSS parser is in <a
                                    href="https://github.com/sass/sass/tree/stable/lib/sass/scss/parser.rb"><code>lib/sass/scss/parser.rb</code></a>.
                            </p></li>
                            <li><p>Parse the syntax in the indented syntax to the node. The indented syntax parser is in
                                <a href="https://github.com/sass/sass/tree/stable/lib/sass/engine.rb"><code>lib/sass/engine.rb</code></a>.
                            </p></li>
                            <li><p>Add support for setting the compilation options on the node in <a
                                    href="https://github.com/sass/sass/tree/stable/lib/sass/tree/visitors/set_options.rb"><code>lib/sass/tree/visitors/set_options.rb</code></a>.
                            </p></li>
                            <li><p>Add support for cloning the node in <a
                                    href="https://github.com/sass/sass/tree/stable/lib/sass/tree/visitors/deep_copy.rb"><code>lib/sass/tree/visitors/deep_copy.rb</code></a>.
                            </p></li>
                            <li><p>If the syntax is just something new from pure CSS, add support for compiling it to
                                CSS in <a
                                        href="https://github.com/sass/sass/tree/stable/lib/sass/tree/visitors/to_css.rb"><code>lib/sass/tree/visitors/to_css.rb</code></a>.
                                If it's for a Sass feature that's not part of CSS, add runtime behavior in <a
                                        href="https://github.com/sass/sass/tree/stable/lib/sass/tree/visitors/perform.rb"><code>lib/sass/tree/visitors/perform.rb</code></a>
                                or
                                <a href="https://github.com/sass/sass/tree/stable/lib/sass/tree/visitors/cssize.rb"><code>lib/sass/tree/visitors/cssize.rb</code></a>.
                            </p></li>
                            <li><p>Add support for converting the syntax back to SCSS and the indented syntax with
                                <code>sass-convert</code> in <a
                                        href="https://github.com/sass/sass/tree/stable/lib/sass/tree/visitors/convert.rb"><code>lib/sass/tree/visitors/convert.rb</code></a>.
                                Don't forget to test this conversion, too!</p></li>
                        </ul>
                    </div>
                    <div class="content-secondary"><h3 id="Tutorials">Tutorials</h3>
                        <ul>
                            <li><a href="http://www.codeschool.com/courses/assembling-sass">Code School</a></li>
                            <li><a href="http://leveluptuts.com/tutorials/sass-tutorials">LevelUp Tuts</a></li>
                            <li><a href="http://www.lynda.com/CSS-tutorials/CSS-LESS-SASS/107921-2.html">Lynda.com</a>
                            </li>
                        </ul>
                        <h3 id="Blogs">Sass Blogs</h3>
                        <ul>
                            <li><a href="http://thesassway.com/">The Sass Way</a></li>
                            <li><a href="http://css-tricks.com/search-results/?q=sass">CSS-Tricks</a></li>
                            <li><a href="http://benfrain.com/tag/sass/">Ben Frain</a></li>
                            <li><a href="http://zurb.com/blog/sass">Zurb</a></li>
                            <li><a href="http://net.tutsplus.com/?s=sass">NetTuts</a></li>
                            <li>
                                <a href="http://viget.com/inspire/search/YTo2OntzOjg6ImtleXdvcmRzIjtzOjQ6InNhc3MiO3M6MTE6InNlYXJjaF9tb2RlIjtzOjM6ImFsbCI7czoxMToicmVzdWx0X3BhZ2UiO3M6MTQ6Imluc3BpcmUvc2VhcmNoIjtzOjEwOiJjb2xsZWN0aW9uIjthOjE6e2k6MDtzOjE6IjEiO31zOjEwOiJsb29zZV9lbmRzIjtiOjE7czo4OiJjYXRlZ29yeSI7czozOiIxMjUiO30">Viget
                                    Inspire</a></li>
                            <li>
                                <a href="http://www.google.com/cse?cx=partner-pub-1988806651014029%3A4kuybaak597&amp;ie=ISO-8859-1&amp;q=sass#gsc.tab=0&amp;gsc.q=sass&amp;gsc.page=1">Unmatched
                                    Style</a></li>
                            <li><a href="http://www.youtube.com/sassbites">Sass Bites</a></li>
                            <li><a href="http://www.sassnews.com">Sass News Weekly</a></li>
                        </ul>
                        <h3 id="Books">Sass Books</h3>
                        <ul>
                            <li><a href="http://anotheruiguy.gitbooks.io/sassintherealworld_book-i/">Sass in the Real
                                World: book 1 of 4</a></li>
                            <li><a href="http://anotheruiguy.gitbooks.io/sass-in-the-real-world-book-2-of-4/">Sass in
                                the Real World: book 2 of 4</a></li>
                            <li><a href="http://www.abookapart.com/products/sass-for-web-designers">Sass for Web
                                Designers (Nov 2013)</a></li>
                            <li><a href="http://manning.com/netherland/">Sass and Compass in Action (Aug 2013)</a></li>
                            <li><a href="http://www.packtpub.com/sass-and-compass-for-designers/book">Sass and Compass
                                for Designers (April 2013)</a></li>
                            <li><a href="http://pragprog.com/book/pg_sass/pragmatic-guide-to-sass">Pragmatic Guide to
                                Sass (Dec 2011)</a></li>
                        </ul>
                        <h3 id="Projects">Projects &amp; Frameworks</h3>
                        <ul>
                            <li><a href="/libsass">libSass</a> — a CSS (and Sass!) authoring framework</li>
                            <li><a href="http://compass-style.org/">Compass</a> — a CSS (and Sass!) authoring framework
                            </li>
                            <li><a href="http://susy.oddbird.net/">Susy</a> — a responsive grid layout built for Compass
                            </li>
                            <li><a href="http://bourbon.io/">Bourbon</a> — a lightweight mixin library</li>
                            <li><a href="http://neat.bourbon.io/">Neat</a> — a mixin-based grid layout system</li>
                            <li><a href="http://www.sache.in/">Sache</a> — a place to find Sass and Compass extensions
                            </li>
                            <li><a href="http://sassmeister.com/">SassMeister</a> — a tool for trying Sass in the
                                browser
                            </li>
                            <li><a href="http://foundation.zurb.com/">Zurb Foundation</a> — a responsive front-end
                                framework
                            </li>
                            <li><a href="https://github.com/malarkey/rock-hammer/">Rock Hammer</a> — a starting
                                framework with some basic styles for a project
                            </li>
                            <li><a href="https://github.com/twbs/bootstrap-sass">Bootstrap</a> — the ubiquitous
                                framework… this time written in Sass!
                            </li>
                            <li><a href="https://github.com/owainlewis/gravity">Gravity</a> — a framework for making
                                HTML5 websites with Sass
                            </li>
                            <li><a href="http://inuitcss.com/">Inuit.css</a> — a powerful, scalable, Sass-based, BEM,
                                OOCSS framework
                            </li>
                            <li><a href="http://flexible.gs/">Flexible Grid System</a> — power of limitless</li>
                            <li><a href="http://sassdoc.com/">SassDoc</a> — A documentation tool for Sass</li>
                        </ul>
                    </div>
                </main>
            </div>
        </div>
    </div>
    <div class="alert release">
        <div class="container">
            <ul>
                <li>Current Release: <span class="release-name">Selective Steve (3.4.22)</span></li>
                <li><a href="../documentation/file.SASS_CHANGELOG.html">Release Notes</a></li>
                <li><a href="https://github.com/sass/sass">Fork on Github</a></li>
                <li><a href="implementation">Implementation Guide</a></li>
            </ul>
        </div>
    </div>
</div>
<footer class="contentinfo" role="contentinfo">
    <nav class="container">
        <ul>
            <li class="contentinfo-legal"><p>Sass © 2006–2015 <a href="http://www.hamptoncatlin.com/">Hampton Catlin</a>,
                <a href="http://nex-3.com/">Natalie Weizenbaum</a>, <a href="http://chriseppstein.github.io/">Chris&nbsp;Eppstein</a>,
                and&nbsp;numerous&nbsp;contributors.</p>
                <p>It is available for use and modification under the <a
                        href="http://sass-lang.com/docs/yardoc/file.MIT-LICENSE.html">MIT&nbsp;License</a>.</p></li>
            <li class="contentinfo-tools">
                <ul>
                    <li><a href="https://github.com/sass">Sass on GitHub</a></li>
                    <li><a href="https://github.com/sass/sass-site">Website Repo</a></li>
                    <li><a href="/styleguide">Style Guide</a></li>
                    <li><a href="/community-guidelines">Community Guidelines</a></li>
                </ul>
            </li>
            <li class="contentinfo-social">
                <a class="twitter-follow-button" data-show-count="false" data-size="large"
                   href="https://twitter.com/SassCSS">Follow @SassCSS</a>
            </li>
        </ul>
    </nav>
</footer>
</body>
</html>